<template>
  <div class="status-root">
    <div class="item" v-for="key in list" :key="key">
      <div class="item-value" :style="{'color': key.color}">{{key.value}}</div>
      <div class="item-name">{{key.name}}</div>
    </div>
  </div>
</template>
  
<script>
  export default {
    name: 'status',

    props: {
      list: {
        type: Array
      }
    },

    data () {
      return {}
    },

    computed: {},

    mounted () {},

    methods: {}
  }
</script>

<style lang="stylus" scoped>
.status-root
  padding-top 0.4rem
  padding-bottom 0.4rem
  display flex
  border-bottom 1px solid #e0e0e0
  box-sizing border-box
  background #fff
  overflow hidden
  .item
    width 100%
    height 1.8rem
    line-height 1rem
    text-align center
    .item-value
      font-weight 900
      font-size 0.8rem
      color #414141
    .item-name
      font-size 0.4rem
      color #aaa
  .item + .item
    border-left 1px solid #e0e0e0
</style>
